<template>
  <div>
    <van-nav-bar title="影院" ref="navbar" @click-left="onClickLeft" @click-right="onClickRight">
      <template #left>
        <span>{{ cityName }}</span><van-icon name="arrow-down" />
      </template>
      <template #right>
        <van-icon name="search" size="28"/>
      </template>
    </van-nav-bar>
    <div class="box" :style="{
      height:height
    }">
      <ul>
        <li v-for="cinema in cinemaList" :key="cinema.cinemaId">
          <div class="cinemaConter" @click="toCinema(cinema.cinemaId)">
            <div class="left">
              <div class="cinema_name overflow">{{ cinema.name }}</div>
              <div class="cinema_address overflow">{{ cinema.address }}</div>
            </div>
            <div class="right">
              <div class="cinema_lowprice">￥{{ cinema.lowPrice | lowPrice }}起</div>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import Vue from 'vue'
import { mapState,mapActions,mapMutations } from 'vuex'
import BetterScroll from 'better-scroll' // 引入better-scroll对页面进行优化

Vue.filter('lowPrice', (data) => {
  return Math.ceil(data / 100)
})
export default {
  data () {
    return {
      height: '0px',
    }
  },
  computed:{
    ...mapState(['cityId','cityName','cinemaList','footHight','cinemaBarHight'])
  },
  mounted () {
    this.changeShow(true)
    this.height = document.documentElement.clientHeight - this.footHight - this.cinemaBarHight + 'px'

    // 判断是否有缓存，没有走分支到store调用异步发送请求
    if(this.cinemaList.length === 0){
      // 分支 到store调用异步发送请求
      this.getCinemaList().then(()=>{
        this.$nextTick(() => {
          new BetterScroll('.box', {
            scrollbar: {
              fade: true // 显示滚动条
            },
            click:false,  
            preventDefault:false  // 关闭BetterScroll的事件派发，用原生的事件派发
          })
        })
      })
    }else {
      this.$nextTick(() => {
        new BetterScroll('.box', {
          scrollbar: {
            fade: true // 显示滚动条
          },
          click:false,  
          preventDefault:false
        })
      })
    }
    
  },
  methods: {
    ...mapActions(['getCinemaList']),
    ...mapMutations(['changeShow']),
    onClickLeft () {
      // 转到城市页面
      this.$router.push('/city')
    },
    onClickRight () {
      // 查询功能
      // 跳转到查询界面
      this.$router.push('/search')
    },
    toCinema(id){
      this.$router.push({
        name:'cinemasitem',
        params: {
          id
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.box{
  // height:78.375rem;
  overflow: hidden;
  position: relative;  // 修正滚动条位置
}
.cinemaConter{
  padding: 1.875rem;
  display: flex;
  justify-content: space-between;
  .left{
    width: 30rem;
  };
  .cinema_name{
    font-size: 1.8rem;
  };
  .cinema_address{
    margin-top: .3125rem;
    font-size: 1.6rem;
    color: #797d82
  };
  .cinema_lowprice{
    color: red;
  }
  .overflow{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
</style>
